<template>
    <div class="loginContainer">
        <head-top :head-title="loginWay? '登录':'密码登录'  " goBack="true">
          <div slot="changeLogin" class="change_login" @click="changeLoginWay">
            {{loginWay ? "密码登录":"短信登录"}}
          </div>
        </head-top>
      <form class="loginForm" v-if="loginWay">
        <section class="input_container phone_number">
          <input type="text" placeholder="手机号" name="phone" maxlength="11" v-model="phoneNumber">
          <button @click.prevent="getVerifyCode" :class="{right_phone_number:rightPhoneNumber}" v-show="!computedTime">获取验证码</button>
          <button @click.prevent v-show="computedTime">已发送({{computedTime}})</button>
        </section>
        <section class="input_container">
          <input type="text" placeholder="验证码" name="mobileCode" maxlength="6" v-model="mobileCode">
        </section>
      </form>
      <form class="loginForm" v-else>
        <section class="input_container">
          <input type="text" placeholder="手机号/邮箱/用户名" v-model.lazy="userAccount">
        </section>
        <section class="input_container">
          <input v-if="!showPassword" type="password" placeholder="密码" v-model="password"/>
          <input v-else type="text" placeholder="密码" v-model="password" />
          <div class="button_switch" :class="{change_to_text:showPassword}">
            <div class="circel_button" :class="{trans_to_right:showPassword}" @click="changePasswordType"></div>
            <span>abc</span>
            <span>...</span>
          </div>
        </section>
        <section class="input_container captcha_code_container">
          <input type="text" placeholder="验证码" maxlenght="4" v-model="codeNumber" />
          <div class="img_change_img">
            <img v-show="captchaCodeImg" :src="captchaCodeImg">
            <div class="change_img" @click="getCaptchaCode">
              <p>看不清</p>
              <p>换一张</p>
            </div>
          </div>
        </section>
      </form>
      <p class="login_tips">
        提示：未注册L账号的手机号，登录时将自动注册，且代表你已同意
        <a href="https://h5.ele.me/service/agreement/">《用户服务协议》</a>
      </p>
      <div class="login_container" @click="">登录</div>
      <router-link to="" class="to_forget" v-if="!loginWay">
        忘记密码
      </router-link>
      <alert-tip v-if="showAlert" :showHide="showAlert" @closeTip="closeTip" :alertText="alertText">

      </alert-tip>
    </div>

</template>

<script>
    import headTop from '../../../components/header/head.vue'
    import alertTip from '../../../components/common/alertTip.vue'
    import {mapState,mapMutations} from 'vuex'
    import {mobileCode,checkExsis,sendLogin,getcaptchas,accountLogin} from '../../../service/getData'

    export default {
      name:'login',
      data(){
        return {
          loginWay:true,//登录方式，默认短信登录
          showPassword:false,//是否显示密码
          phoneNumber:null,//电话号码
          mobileCode:null,//短信验证码
          validate_token:null,//获取短信时返回的验证值，登录时需要
          computedTime:0,//倒数计时
          userInfo:null,//获取到的用户信息
          userAccount:null,//用户名
          password:null,//密码
          codeNumber:null,//验证码
          captchaCodeImg:null,//验证码地址
          showAlert:false,//显示提示组件
          alertText:null,//提示的内容
        }
      },
      created(){
        this.getCaptchaCode();
      },
      components:{
        headTop,
        alertTip
      },
      computed:{
        //判断手机号码
        rightPhoneNumber:function () {
          return /^1\d{10}$/gi.test(this.phoneNumber);
        }
      },
      methods:{
        ...mapMutations([
          'RECODE_USERINFO',
        ]),
        //改变登录方式
        changeLoginWay(){
            this.loginWay = !this.loginWay;
        },
        //是否显示密码
        changePasswordType(){
            this.showPassword=!this.showPassword;
        },
        //获取验证码（密码登录）
        async getCaptchaCode(){
            let res = await getcaptchas();
            this.captchaCodeImg = 'https://mainsite-restapi.ele.me/v1/captchas/' + res.code;
        },
        //获取短信验证码（手机登录）
        async getVerifyCode(){
            //校验手机号
            if(this.rightPhoneNumber){
              this.computedTime=30;
              this.timer = setInterval(()=>{
                  this.computedTime--;
                  if(this.computedTime==0){
                    clearInterval(this.timer);
                  }
              },1000)
              //判断用户是否存在
              let exsis = await checkExsis(this.phoneNumber,'mobile');
              if(exsis.message){
                this.showAlert=true;
                this.alertText=exsis.message;
                return
              }else if(!exsis.is_exists){
                this.showAlert=true;
                this.alertText='您输入的手机号尚未绑定';
                return
              }

              //发送短信验证码
              let res = await mobileCode(this.phoneNumber);
              if(res.message){
                this.showAlert=true;
                this.alertText=res.message;
                return
              }
              this.validate_token = res.validate_token;
            }
        },
        //登录
        async mobileLogin(){
            //手机登录
            if(this.loginWay){
              if(!this.rightPhoneNumber){
                this.showAlert = true;
                this.alertText='手机号码不正确';
                return
              }else if(!(/^\d{6}$/gi.test(this.mobileCode))){
                this.showAlert=true;
                this.alertText='短信验证码不正确';
                return
              }
              //手机登录
              this.userInfo =  await sendLogin(this.mobileCode,this.phoneNumber,this.validate_token);
            }else{//密码登录
              if(!this.userAccount){
                this.showAlert= true;
                this.alertText = '请输入手机号/邮箱/用户名'
                return
              }else if(!this.password){
                  this.showAlert = true;
                  this.alertText='请输入密码';
                  return
              }else if(!this.codeNumber){
                  this.showAlert=true;
                  this.alertText = "请输入验证码"
                  return
              }
              //密码登录
              this.userInfo = await accountLogin(this.userAccount,this.password,this.codeNumber);
            }
            //如果返回值不正确，则弹出提示框，返回值正确，则返回上一页
            if (!this.userInfo.user_id){
              this.showAlert= true;
              this.alertText= this.userInfo.message;
              if(!this.loginWay) this.getCaptchaCode();
            }else{
              this.RECODE_USERINFO(this.userInfo);
              this.$router.go(-1);
            }
        }
      }
    }
</script>

<style lang="scss" scoped>
  @import "../../../assets/styles/mixin.scss";
  .loginContainer{
    padding-top: 1.95rem;
    p,span,input{
      font-family:Helvetica Neue,Tahoma,Arial;
    }
  }
  .change_login{
    position: absolute;
    @include ct;
    right:0.75rem;
    @include sc(.7rem, #fff);
  }

  .loginForm{
    background-color: #fff;
    margin-top: .6rem;
    .input_container {
      display: flex;
      justify-content:space-between;
      padding:.6rem .8rem;
      border-bottom: 1px solid #f1f1f1;
      input{
        @include sc(.7rem,#666);
      }
      button{
        @include sc(.65rem,#fff);
        font-family: Helvetica Neue,Tahoma,Arial;
        padding:.28rem .4rem;
        border:1px;
        border-radius: 0.15rem;
      }
      .right_phone_number{
        background-color:#4cd964;
      }
    }
    .phone_number{
      padding:.3rem .8rem
    }
    .captcha_code_container{
      height: 2.2rem;
      .img_change_img{
        display: flex;
        align-items: center;
        img{
          @include wh(3.5rem,1.5rem);
          margin-right: .2rem;
        }
        .change_img{
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          width: 2rem;
          justify-content: center;
          p{
            @include sc(.55rem,#666);
          }
          p:nth-of-type(2){
            color:#3b95e9;
            margin-top: .2rem;
          }
        }
      }
    }





  }

  .login_tips{
    @include sc(.5rem,#999);
    padding:.4rem .9rem;
    line-height:.7rem;
    a{
      color: #3b95e9;
    }
  }

  .login_container{
    margin:0.5rem 1rem;
    @include sc(.7rem,#fff);
    background-color:#4cd964;
    padding:.5rem 0;
    border:1px;
    border-radius: 0.15rem;
    text-align: center;
  }

  .to_forget{
    float:right;
    @include sc(.6rem,#3b95e9);
    margin-right: .3rem;
  }

  .button_switch{
    background-color: #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    @include wh(2rem,.7rem);
    padding:0 .2rem;
    border: 1px;
    border-radius: 0.5rem;
    position: relative;
    transition: all .3s;
    .circel_button{
      transition: all .3s;
      position: absolute;
      z-index: 1;
      @include wh(1.2rem,1.2rem);
      left: -.1rem;
      box-shadow: 0 0.026667rem 0.053333rem 0 rgba(0,0,0,.1);
      background-color: #f1f1f1;
      border-radius: 50%;
    }
  .trans_to_right{
    transform: translate(1.3rem);
  }
  span{
    @include sc(.45rem,#fff);
    transform: translateY(.05rem);
    linde-height:.6rem;
  }
  span:nth-of-type(2){
    transform: translateY(-.08rem);
  }
  }

  .change_to_text{
    float: right;
    @include sc(.6rem,#3b95e9);
    margin-right: .3rem;
  }




</style>
